<template>
    <div class = "area">
        <el-container>
            <el-container>
            <el-main>
                <el-card class="box-card">
                <div slot="header" class="clearfix" style="display:flex">
                 <el-page-header @back="goBack" :content="title">
                 </el-page-header>
                </div>
                <div class="Box-wrapper">
                    <el-col v-for="(item,index) in from" :key="index" @click.native = "city(index)">
                        <el-card shadow="hover" style="margin-bottom: 10px;">
                        <div  class = "Box">
                        <div class = "title">
                            <p>{{item.name}}</p>
                        </div>
                    </div>
                     </el-card>
                    </el-col>
                </div>
           </el-card>
            </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
export default {
    data(){
        return{
            from:[],
            title:'国家'
        }
    },
    created() {
        this.$api.districtmanagement.Accesstoareas().then(res => {
            this.from = res.data
        }).catch(err => {
                    this.$message.error(err); //登录失败提示错误
        });
    },
    methods:{
    //请求省级
    city(index){
        // if(this.title === '国家'){
        this.$api.districtmanagement.province(this.from[index].addressCode).then(res => {
            this.title = '省份'
        }).catch(err => {
            this.$message.error(err); //登录失败提示错误
        });
    //请求市级
    //     } else if(this.title === '省份') {
    //     this.$api.districtmanagement.city(this.from[index].addressCode).then(res => {
    //         this.title = '市级'
    //     }).catch(err => {
    //         this.$message.error(err); //登录失败提示错误
    //     });
    // //请求所有基地
    //     } else {

    //     }
    },
    goBack() {
        console.log('go back');
      }
    }
}
</script>
<style scoped>
    .area{
        width:100%
    }
    .area .Box-wrapper{
        display: flex;
        flex-flow: column;
        padding:20px;
    }
    .area .Box-wrapper .Box{
        width:100%;
    }
</style>
